<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webgl平移</title>
    <style>
        #canvas {
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <div><canvas id="canvas" width="400" height="400"></canvas></div>

    <script type="text/javascript">
        /**
         * @description: 生成webgl着色器对象的程序
         * @param {*} gl gl的上下文对象；ctx.getContext('webgl')
         * @param {*} VERTEX_SHADER_SOURCE；顶点着色器源码
         * @param {*} FRAGMENT_SHADER_SOURCE；片元着色器源码
         * @return {*} 程序对象
         */
        function initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE) {
            const vertexShader = gl.createShader(gl.VERTEX_SHADER);
            const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);

            gl.shaderSource(vertexShader, VERTEX_SHADER_SOURCE) // 指定顶点着色器的源码
            gl.shaderSource(fragmentShader, FRAGMENT_SHADER_SOURCE) // 指定片元着色器的源码

            // 编译着色器
            gl.compileShader(vertexShader)
            gl.compileShader(fragmentShader)

            // 创建一个程序对象
            const program = gl.createProgram();

            gl.attachShader(program, vertexShader)
            gl.attachShader(program, fragmentShader)

            gl.linkProgram(program)

            gl.useProgram(program)

            return program;
        }

        // 获取canvas元素
        const ctx = document.getElementById('canvas')

        // 获取webgl绘图上下文
        const gl = ctx.getContext('webgl')

        // // 顶点着色器代码
        const VERTEX_SHADER = `
            attribute vec4 aPosition;
            // attribute float aPosSize;
            uniform vec4 uTranslation;
            void main(){
                gl_Position = aPosition + uTranslation;
            }
        `;

        // 片元着色器代码
        const FRAGMENT_SHADER = `
            void main(){
                gl_FragColor = vec4(1.0,0.0,0.0,1.0);
            }
        `;

        let Tx = 0.5, Ty = 0.5, Tz = 0;
        let program = initShader(gl, VERTEX_SHADER, FRAGMENT_SHADER);
        let aPos = gl.getAttribLocation(program, 'aPosition');
        let getUTranslation = gl.getUniformLocation(program, 'uTranslation');

        gl.uniform4f(getUTranslation, Tx, Ty, Tz, 0.0);

        // 设置多个点位置信息的缓存数据
        let vertices = new Float32Array([
            0, 0.5, -0.5, -0.5, 0.5, -0.5
        ]);
        // 创建缓冲区对象
        let vertexBuffer = gl.createBuffer();

        // 2.绑定缓冲区对象
        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

        // 3.向缓冲区对象写入数据
        //  STATIC_DRAW 向缓冲区对象写入一次数据，但需要绘制多次
        //  STREAM_DRAW 向缓冲区对象写入一次数据，绘制多次
        //  DYNAMIC_DRAW 向缓冲区对象写入多次数据，并绘制多次
        gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

        // 4.将缓冲区对象分配给一个 attribute 变量
        gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);

        // 5.开启 attribute 变量
        gl.enableVertexAttribArray(aPos);

        // 设置背景色
        gl.clearColor(0.2, 0.8, 0.0, 0.3);
        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER);

        // 绘制三角形 POINTS LINES LINE_STRIP LINE_LOOP TRIANGLES TRIANGLE_STRIP TRIANGLE_FAN
        gl.drawArrays(gl.TRIANGLES, 0, 3);


    </script>
</body>

</html>